<template>
	<view class="page">
		<u-swiper :list="list1" keyName="" :height="300" :indicator="true" indicatorMode="dot"
			:circular="true"></u-swiper>
		<view class="describe">
			<view class="name">{{detail.name}}</view>
			<view class="detail">{{detail.blurb}}</view>
			<view class="price">￥{{detail.price}}元</view>
			<view class="sort">
				<view>销量{{detail.sellNum}}</view>
				<view>库存：{{detail.inventory}}</view>
			</view>
		</view>
		<view class="describe_box">
			<view class="title">商品详情</view>
			<view class="rich">
				<u-parse :content="detail.goodInfo"></u-parse>
			</view>
		</view>
		<view class="btns">
			<view class="cart_box">
				<image src="/static/image/shop01.png" mode="widthFix" class="cart" @click="goCar"></image>
			</view>
			<view class="btn1" @click="addCar">加入购物车</view>
			<view class="btn2" @click="nowBuy">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {
		groupGoodsQueryById,
		cartAdd
	} from "@/api.js"
	export default {
		data() {
			return {
				id: '',
				detail: {},
				list1: [],
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.id = opt.id
				this.getDetial()
			}
		},
		methods: {
			nowBuy() {
				this.detail.number = 1
				this.detail.goodId = this.detail.id
				uni.navigateTo({
					url: '/pages/shop/tuanGouConfirmOrder?detail=' + JSON.stringify([this.detail])
				})
			},
			async getDetial() {
				let res = await groupGoodsQueryById({
					id: this.id
				})
				if (res.code == 200) {
					this.list1 = res.result.carouselImages.split(',')
					this.detail = res.result
				}
			},
			async addCar() {
				let res = await cartAdd({
					goodId: this.id,
					number: 1
				})
				if (res.code == 200) {
					uni.showToast({
						icon: "none",
						title: '加购成功'
					})
				}
			},
			goCar() {

				uni.navigateTo({
					url: '/pages/shop/goodsCar'
				})

			},
		},
	}
</script>

<style scoped lang="scss">
	.page {
		background: rgb(245, 245, 245);
		min-height: 100vh;
		width: 750rpx;
	}

	.describe {
		width: 750rpx;
		height: 244rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 40rpx;
		box-sizing: border-box;

		.price {
			font-family: Noto Sans SC, Noto Sans SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #FF530A;
		}

		.sort {
			font-family: Noto Sans SC, Noto Sans SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #999;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #4F4F62;
			line-height: 81rpx;
		}

		.detail {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #7E8295;
			line-height: 40rpx;
		}
	}

	.describe_box {
		width: 750rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 20rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 81rpx;
			text-align: center;
		}

		.rich {
			width: 690rpx;
			margin: 0 auto;
			background: #FFFFFF;
			padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
		}
	}

	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		width: 750rpx;
		height: 160rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.cart_box {
			width: 60rpx;

			.cart {
				width: 100%;
			}
		}

		.btn1 {
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #fff;
			border: 1rpx solid #FF8E02;
			border-radius: 70rpx 70rpx 70rpx 70rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #FF8E02;
			margin: 0 30rpx;
		}

		.btn2 {
			width: 220rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: #FF8E02;
			border: 1rpx solid #FF8E02;
			border-radius: 70rpx 70rpx 70rpx 70rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 30rpx;
		}
	}
</style>